const typeClassMap = {
  info: 'tag--info',
  success: 'tag--success',
  warning: 'tag--warning',
  error: 'tag--error',
  neutral: 'tag--neutral',
  brand: 'tag--info'
};

const sizeClassMap = {
  small: 'size-small',
  medium: '',
  large: 'size-large'
};

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },

  properties: {
    text: {
      type: String,
      value: ''
    },
    type: {
      type: String,
      value: 'info'
    },
    size: {
      type: String,
      value: 'medium'
    },
    pill: {
      type: Boolean,
      value: true
    }
  },

  data: {
    typeClass: 'tag--info',
    sizeClass: ''
  },

  lifetimes: {
    attached() {
      this.computeClasses();
    }
  },

  observers: {
    'type, size'(type, size) {
      this.computeClasses(type, size);
    }
  },

  methods: {
    computeClasses(type = this.properties.type, size = this.properties.size) {
      const typeClass = typeClassMap[type] || typeClassMap.info;
      const sizeClass = sizeClassMap[size] || '';
      this.setData({ typeClass, sizeClass });
    }
  }
});
